<template>
  <div>
    <van-field
  readonly
  clickable
  label="国家/地区"
  :value="value"
  placeholder="请选择国家或地区"
  @click="showPicker = true"
  input-align='right'
  right-icon='arrow'
/>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>

<van-field :value='data' label="证件类型" input-align='right' placeholder="请选择证件类型" right-icon='arrow' disabled id="zjlx" />
  </div>
</template>

<script>
  export default {
  data() {
    return {
      value: '中国',
      data:'内地居民身份证',
      show_zjlx:false,
      showPicker: false,
      columns: ['中国', '中国香港', '中国澳门', '中国台湾', '日本'],
    }
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
  watch: {
    value(newValue, oldValue) {
      if(newValue=='中国'){
        this.data='内地居民身份证'
      }else if(newValue=='中国香港'){
        this.data='香港居民身份证'
      }else if(newValue=='中国澳门'){
        this.data='澳门居民身份证'
      }else if(newValue=='中国台湾'){
        this.data='台湾居民身份证'
      }else{
        this.data='护照'
      }
    }
  },
};
</script>

<style>
  .van-popup--center.van-popup--round {
    border-radius: 6px;
    width:215px;
    line-height: 30px;
    height: 30px;
    text-align: center;
}
</style>